<template>
  <transition name="fade" appear>
    <div class="reset-pwd-form">
      <div class="form-header">
        <h3 class="form-title">修改密码</h3>
        <p class="form-subtitle">定期更换密码，保护账户安全</p>
      </div>
      
      <el-form ref="form" :model="user" :rules="rules" label-width="100px" class="password-form">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password prefix-icon="el-icon-lock" />
        </el-form-item>
        
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password prefix-icon="el-icon-key" @input="checkPasswordStrength" />
          <div class="password-strength" v-if="user.newPassword">
            <span class="strength-label">密码强度：</span>
            <span :class="['strength-value', passwordStrengthClass]">{{ passwordStrengthText }}</span>
            <div class="strength-bar">
              <div :class="['strength-bar-fill', passwordStrengthClass]"></div>
            </div>
          </div>
        </el-form-item>
        
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="user.confirmPassword" placeholder="请再次输入新密码" type="password" show-password prefix-icon="el-icon-key" />
        </el-form-item>
        
        <div class="password-tips">
          <h4 class="tips-title">密码要求：</h4>
          <ul class="tips-list">
            <li :class="{ 'valid': passwordValidations.length }">
              <i :class="passwordValidations.length ? 'el-icon-circle-check' : 'el-icon-circle-close'"></i>
              至少6个字符
            </li>
            <li :class="{ 'valid': passwordValidations.hasUpper }">
              <i :class="passwordValidations.hasUpper ? 'el-icon-circle-check' : 'el-icon-circle-close'"></i>
              包含大写字母
            </li>
            <li :class="{ 'valid': passwordValidations.hasLower }">
              <i :class="passwordValidations.hasLower ? 'el-icon-circle-check' : 'el-icon-circle-close'"></i>
              包含小写字母
            </li>
            <li :class="{ 'valid': passwordValidations.hasNumber }">
              <i :class="passwordValidations.hasNumber ? 'el-icon-circle-check' : 'el-icon-circle-close'"></i>
              包含数字
            </li>
          </ul>
        </div>
        
        <div class="form-actions">
          <el-button type="primary" icon="el-icon-check" @click="submit">保存</el-button>
          <el-button icon="el-icon-close" @click="close">关闭</el-button>
        </div>
      </el-form>
    </div>
  </transition>
</template>

<script>
import { updateUserPwd } from "@/api/system/user"

export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"))
      } else {
        callback()
      }
    }
    return {
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      }
    }
  },
  computed: {
    passwordStrengthClass() {
      if (!this.user.newPassword) return '';
      
      let strength = 0;
      // 长度检查
      if (this.user.newPassword.length >= 6) strength++;
      if (this.user.newPassword.length >= 10) strength++;
      
      // 复杂度检查
      if (/[a-z]/.test(this.user.newPassword)) strength++;
      if (/[A-Z]/.test(this.user.newPassword)) strength++;
      if (/[0-9]/.test(this.user.newPassword)) strength++;
      if (/[^a-zA-Z0-9]/.test(this.user.newPassword)) strength++;
      
      if (strength <= 2) return 'weak';
      if (strength <= 4) return 'medium';
      return 'strong';
    },
    passwordStrengthText() {
      if (!this.user.newPassword) return '';
      
      const strengthClass = this.passwordStrengthClass;
      if (strengthClass === 'weak') return '弱';
      if (strengthClass === 'medium') return '中';
      if (strengthClass === 'strong') return '强';
      return '';
    },
    passwordValidations() {
      const password = this.user.newPassword || '';
      const confirmPassword = this.user.confirmPassword || '';
      
      return {
        length: password.length >= 6 && password.length <= 20,
        specialChar: /^[^<>"'|\\]+$/.test(password),
        match: password && confirmPassword && password === confirmPassword
      };
    }
  },
  methods: {
    checkPasswordStrength() {
      // 这个方法用于触发密码强度检测
      // 实际检测逻辑在computed属性中
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
            this.$modal.msgSuccess("修改成功")
            this.$tab.closePage()
          })
        }
      })
    },
    close() {
      this.$tab.closePage()
    }
  }
}
</script>

<style lang="scss" scoped>
.reset-pwd-form {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  .form-header {
    margin-bottom: 24px;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 16px;
    
    .form-title {
      font-size: 20px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 8px 0;
    }
    
    .form-subtitle {
      font-size: 14px;
      color: #909399;
      margin: 0;
    }
  }
  
  .password-form {
    .el-form-item {
      margin-bottom: 22px;
      
      ::v-deep .el-form-item__label {
        font-weight: 500;
        color: #606266;
      }
      
      ::v-deep .el-input__inner {
        border-radius: 6px;
        transition: all 0.3s ease;
        
        &:focus {
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }
      }
      
      ::v-deep .el-input__prefix {
        left: 12px;
        
        .el-icon-lock, .el-icon-key {
          color: #c0c4cc;
          font-size: 16px;
          transition: color 0.3s ease;
        }
      }
      
      ::v-deep .el-input__inner:focus + .el-input__prefix .el-icon-lock,
      ::v-deep .el-input__inner:focus + .el-input__prefix .el-icon-key {
        color: #409eff;
      }
    }
    
    .password-strength {
      margin-top: 8px;
      
      .strength-label {
        font-size: 12px;
        color: #909399;
        margin-right: 8px;
      }
      
      .strength-value {
        font-size: 12px;
        font-weight: 500;
        
        &.weak {
          color: #f56c6c;
        }
        
        &.medium {
          color: #e6a23c;
        }
        
        &.strong {
          color: #67c23a;
        }
      }
      
      .strength-bar {
        width: 100%;
        height: 4px;
        background-color: #e4e7ed;
        border-radius: 2px;
        margin-top: 6px;
        overflow: hidden;
        
        .strength-bar-fill {
          height: 100%;
          border-radius: 2px;
          transition: width 0.3s ease, background-color 0.3s ease;
          
          &.weak {
            width: 33%;
            background-color: #f56c6c;
          }
          
          &.medium {
            width: 66%;
            background-color: #e6a23c;
          }
          
          &.strong {
            width: 100%;
            background-color: #67c23a;
          }
        }
      }
    }
    
    .password-tips {
      margin: 20px 0;
      padding: 16px;
      background-color: #f8f9fa;
      border-radius: 8px;
      
      .tips-title {
        font-size: 14px;
        font-weight: 500;
        color: #606266;
        margin: 0 0 12px 0;
      }
      
      .tips-list {
        margin: 0;
        padding: 0;
        list-style: none;
        
        li {
          display: flex;
          align-items: center;
          font-size: 13px;
          color: #909399;
          margin-bottom: 8px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          &.valid {
            color: #67c23a;
          }
          
          i {
            margin-right: 8px;
            font-size: 14px;
          }
        }
      }
    }
    
    .form-actions {
      text-align: center;
      margin-top: 30px;
      
      .el-button {
        padding: 10px 24px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &.el-button--primary {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: none;
          margin-right: 16px;
          
          &:hover {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
          }
          
          i {
            margin-right: 6px;
          }
        }
        
        &:not(.el-button--primary) {
          border: 1px solid #dcdfe6;
          color: #606266;
          
          &:hover {
            color: #409eff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
            transform: translateY(-2px);
          }
          
          i {
            margin-right: 6px;
          }
        }
      }
    }
  }
}

// 页面过渡动画
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

// 响应式设计
@media (max-width: 768px) {
  .reset-pwd-form {
    padding: 16px;
    
    .form-header {
      margin-bottom: 20px;
      padding-bottom: 12px;
      
      .form-title {
        font-size: 18px;
      }
      
      .form-subtitle {
        font-size: 13px;
      }
    }
    
    .password-form {
      .el-form-item {
        margin-bottom: 18px;
        
        ::v-deep .el-form-item__label {
          font-size: 14px;
        }
        
        ::v-deep .el-input__inner {
          font-size: 14px;
        }
      }
      
      .password-tips {
        margin: 16px 0;
        padding: 12px;
        
        .tips-title {
          font-size: 13px;
          margin-bottom: 10px;
        }
        
        .tips-list {
          li {
            font-size: 12px;
            margin-bottom: 6px;
            
            i {
              font-size: 13px;
            }
          }
        }
      }
      
      .form-actions {
        margin-top: 24px;
        
        .el-button {
          padding: 8px 20px;
          font-size: 14px;
          
          &.el-button--primary {
            margin-right: 12px;
            margin-bottom: 10px;
          }
          
          &:not(.el-button--primary) {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .reset-pwd-form {
    padding: 12px;
    
    .form-header {
      margin-bottom: 16px;
      padding-bottom: 10px;
      
      .form-title {
        font-size: 16px;
      }
      
      .form-subtitle {
        font-size: 12px;
      }
    }
    
    .password-form {
      .el-form-item {
        margin-bottom: 16px;
        
        ::v-deep .el-form-item__label {
          font-size: 13px;
        }
        
        ::v-deep .el-input__inner {
          font-size: 13px;
          padding: 8px 10px;
        }
        
        ::v-deep .el-input__prefix {
          left: 10px;
          
          .el-icon-lock, .el-icon-key {
            font-size: 14px;
          }
        }
      }
      
      .password-strength {
        .strength-label {
          font-size: 11px;
        }
        
        .strength-value {
          font-size: 11px;
        }
      }
      
      .password-tips {
        margin: 12px 0;
        padding: 10px;
        
        .tips-title {
          font-size: 12px;
          margin-bottom: 8px;
        }
        
        .tips-list {
          li {
            font-size: 11px;
            margin-bottom: 4px;
            
            i {
              font-size: 12px;
            }
          }
        }
      }
      
      .form-actions {
        margin-top: 20px;
        
        .el-button {
          padding: 6px 16px;
          font-size: 13px;
          width: 100%;
          margin-bottom: 10px;
          
          &.el-button--primary {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
